<template>
    <div class="app_container">
      <!--  顶部 Header 区域 -->
      <mt-header fixed title="简木论坛"></mt-header>

      <!-- 中间的 路由 router -->
      <transition>
      <router-view></router-view>
      </transition>


      <!-- 底部 Tabbar 区域 -->
      <nav class="mui-bar mui-bar-tab">
			<routerLink class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</routerLink>
			<routerLink class="mui-tab-item" to="/member">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">会员</span>
			</routerLink>
			<routerLink class="mui-tab-item" to="/shopCar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</routerLink>
			<routerLink class="mui-tab-item" to="/setup">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</routerLink>
		</nav>
      
    </div>
</template>

<script>
export default {
    data() {
      return {
        
      }
    },
    
    methods: {
     
      
    },
}
</script>
<style lang="less" scoped>
    .app_container{
      padding-top: 40px;
      padding-bottom: 50px;
      overflow: hidden;
    }

    transition{
      .v-enter{transform: translateX(100%);}
      .v-leave-to {transform: translateX(-100%);}
      .v-enter-active,.v-leave-active {transition: all 0.5s ease;}
    }
</style>